* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    display: block;
    width: 100%
}

html,
body {
    width: 100%;
    height: 100%
}

body {
    display: flex;
    /* 修改主轴方向 */
    flex-direction: column;
    padding: 0 0.24rem;
}

header {
    height: 1.73rem;
    /* background-color: pink; */
}


/* 导航栏 */

.index_nav {
    height: 0.68rem;
    /* background-color: tomato; */
    display: flex;
    overflow-x: auto;
}

.index_nav>p {
    line-height: 0.68rem;
    font-size: 0.3rem;
    /* 设置是否挤压 */
    flex-shrink: 0;
    margin: 0px 12px;
}

.index_nav>.on {
    font-size: 0.36rem;
    font-weight: 600;
    border-bottom: 3px solid #fe5335;
    margin-left: 0
}

.index_nav>img {
    width: 0.68rem;
    height: 0.68rem;
    position: fixed;
    right: 0.24rem;
}


/* 搜索框 */

.index_search {
    height: 1.05rem;
    /* background-color: tomato; */
    display: flex;
}

.index_search>.there {
    width: 0.67rem;
    height: 0.67rem;
    margin-top: 0.2rem;
    margin-left: 0.3rem;
}

.search_box {
    flex: 1;
    display: flex;
    height: 70%;
    margin: auto;
    border-radius: 1000px;
    background-color: #f3f4f6;
}

.search_box>input {
    width: 70%;
    height: 90%;
    border: none;
    outline: none;
    margin: auto;
    text-indent: 0.3rem;
    background-color: #f3f4f6;
}

.search_box>img {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.1rem;
}

.search_box>span {
    display: block;
    margin-top: 0.2rem;
    color: #ccc;
}

.search_box>.two {
    margin: 0.1rem 0.16rem;
}

section {
    flex: 1;
    overflow: auto;
}


/* 轮播图 */

.ban {
    margin-top: 0.16rem;
    width: 100%;
    height: 2.78rem;
}


/* 选项dl */

.option_nav {
    margin-top: 0.34rem;
    height: 1.44rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    /* background-color: #99c; */
}

.option_nav>dl {
    width: 1rem;
    height: 1.44rem;
    /* background-color: red; */
}

.option_nav>dl>dd {
    height: 0.44rem;
    line-height: 0.44rem;
    text-align: center;
}


/* 头条 */

.headline {
    margin-top: 0.34rem;
    width: 100%;
    height: 0.84rem;
    display: flex;
    background-color: #f8f8f8;
    border: 2px solid #ffff;
    box-shadow: 0 0.1rem 0.3rem #f8f8f8;
    border-radius: 0.1rem;
}

.headline>p {
    flex: 1;
}

.headline>.one {
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.1rem;
}

.headline>.two {
    width: 0.4rem;
    height: 0.4rem;
    margin-top: 0.2rem;
}

.headline>.there {
    width: 1.2rem;
    height: 0.5rem;
    margin-top: 0.16rem;
}


/* 猜你喜欢 */


/* 上 */

.guess_like_top {
    margin-top: 0.4rem;
    height: 1rem;
    line-height: 1rem;
    display: flex;
    justify-content: space-between;
    /* background-color: #99c; */
}

.guess_like_top>p {
    font-size: 0.34rem;
    font-weight: 600;
}

.update {
    display: flex;
}

.update>img {
    width: 0.4rem;
    height: 0.4rem;
    margin-top: 0.3rem;
}


/* 下 */

.guess_like_bottom>dl {
    width: 100%;
    /* height: 1.52rem; */
    display: flex;
    margin-bottom: 0.44rem;
    /* background-color: #cc9; */
}

.guess_like_bottom>dl>dt {
    width: 1.52rem;
    margin-right: 0.26rem;
}

.guess_like_bottom>dl>dd {
    flex: 1;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    /* background-color: red; */
}

.guess_like_bottom .one {
    font-size: 0.28rem;
    font-weight: 600;
}

.guess_like_bottom .two {
    font-size: 0.24rem;
    line-height: 0.86rem;
    color: #5a5a5a;
}

.guess_like_bottom .there {
    color: #5a5a5a;
    display: flex;
    margin-bottom: 0.26rem;
}

.guess_like_bottom .there>img {
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.1rem;
}

.guess_like_bottom .there>span {
    display: block;
}


/* 精选 */

.choiceness {
    width: 100%;
}

.choiceness>p {
    line-height: 1rem;
    font-size: 0.34rem;
    font-weight: 600;
}

.choiceness .ban {
    display: flex;
    overflow-x: auto;
}

.choiceness .ban>img {
    width: 2.12rem;
    height: 2.5rem;
    flex-shrink: 0;
    margin-right: 0.16rem;
}


/* 精选下 */

.choiceness_bottom>dl {
    width: 100%;
    /* height: 1.52rem; */
    display: flex;
    margin-bottom: 0.44rem;
    /* background-color: #cc9; */
}

.choiceness_bottom>dl>dt {
    width: 1.52rem;
    margin-right: 0.26rem;
}

.choiceness_bottom>dl>dd {
    flex: 1;
    border-top: 1px solid #efeded;
    border-bottom: 1px solid #efeded;
    /* background-color: red; */
}

.choiceness_bottom .one {
    font-size: 0.28rem;
    font-weight: 600;
}

.choiceness_bottom .two {
    font-size: 0.24rem;
    line-height: 0.86rem;
    color: #5a5a5a;
}

.choiceness_bottom .there {
    color: #5a5a5a;
    display: flex;
    margin-bottom: 0.26rem;
}

.choiceness_bottom .there>img {
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.1rem;
}

.choiceness_bottom .there>span {
    display: block;
}


/* 脚 */

footer {
    height: 1rem;
    border-top: 1px solid #efeded;
    /* background: cyan; */
    display: flex;
    justify-content: space-between;
}

footer>dl {
    width: 0.8rem;
    height: 100%;
    /* background-color: red; */
    /* background-color: white; */
}

footer>dl>dt {
    height: 0.5rem;
    text-align: center;
    line-height: 0.5rem;
    font-size: 0.5rem;
    margin-top: 0.1rem;
}

footer>dl>dd {
    text-align: center;
}

footer .icon-bofang3 {
    font-size: 0.76rem;
    line-height: 0.76rem;
}

.iconfont {
    color: #313131;
}

footer>dl:hover {
    color: #fe7041;
}

footer>dl>dt:hover {
    color: #fe7041;
}